<template>
  <view class="coursesLearned">
    <view v-if="courses.length">
      <view class="course-item" v-for="(course, index) in courses" :key="index" @click="jumpDetails(course.productId)">
        <view class="course-img">
          <image :src="course.image" mode="aspectFill"></image>
          <view class="course-type-tag" :class="course.productValue['默认'].type === 0 ? 'offline' : 'online'">
            <image class="type-icon" :src="course.productValue['默认'].type === 0 ? IMAGE_CONFIG.xianXia : IMAGE_CONFIG.xianShang"></image>
            <text class="type-text">{{ course.productValue['默认'].type === 0 ? '线下课' : '线上课' }}</text>
          </view>
        </view>
        <view class="course-info">
          <view class="course-name">{{ course.name }}</view>
          <view class="course-progress">已完成{{ course.videoProgress }}课时</view>
        </view>
      </view>
    </view>
    <view v-else style="width: 100%;text-align: center;color: #6B7280;" :style="!display?'margin-top: 100px':''">
      暂时还没有学习过的课程快去学习吧！！！
    </view>
  </view>
</template>

<script>
import {IMAGE_CONFIG} from '@/utils/imageConfig'
export default {
  name: "coursesLearned",
  props: ['courses','display'],
  data() {
    return {
      IMAGE_CONFIG: IMAGE_CONFIG.index,
    }
  },
  methods: {
    jumpDetails(id) {
      uni.navigateTo({
        url: '/pages/discover/courseDetails/index?id=' + id
      })
    },
  }
}
</script>pages/goods/follow/index

<style scoped lang="scss">

$colorTit: #231917;
$colorContent: #53433F;
.coursesLearned {
  .course-item {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 10px;
    /*margin-bottom: 15px;*/
    overflow: hidden;
    padding: 15px;

    .course-img {
      width: 200rpx;
      height: 120rpx;
      display: flex;
      align-items: center;
      margin-right: 15px;
      overflow: hidden;
      border-radius: 10px;
      position: relative;
      /* 课程类型标签样式 */
      .course-type-tag {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        padding: 8rpx 16rpx;
        //border-radius: 20rpx;
        color: #fff;
        font-size: 22rpx;
        font-weight: 500;
        z-index: 10;

        &.offline {
          background: linear-gradient(135deg, #b3793b, #b3793b);
        }

        &.online {
          background: linear-gradient(135deg, #8e4c38, #8e4c38);
        }

        .type-icon {
          margin-right: 10rpx;
          width: 20rpx;
          height: 20rpx;
        }

        .type-text {
          font-size: 22rpx;
          font-weight: 500;
        }
      }
      image {
        width: 100%; /* 图片宽度撑满容器 */
        height: 100%; /* 图片高度撑满容器 */
        object-fit: cover; /* 图片等比缩放，填满容器，可能裁剪 */
      }
    }

    .course-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 400rpx;
      .course-name {
        font-size: 16px;
        color: $colorTit;
        margin-bottom: 5px;
        white-space: nowrap;      /* 禁止换行 */
        overflow: hidden;         /* 超出部分隐藏 */
        text-overflow: ellipsis;  /* 显示省略号 */
        width: 100%;
      }

      .course-progress {
        font-size: 14px;
        color: #6B7280;
      }
    }
  }
}
</style>